<template>
	<div class="content">
		<div class="content-top">
			车辆管理_车辆历史轨迹
		</div>
		<div class="box-card box-shadow">
			<el-form :inline="true" class="demo-form-inline">
				<div>
					<el-form-item style="margin: 10px 28px!important;" label="开始时间">
						<el-date-picker style="width: 200px;" v-model="start_time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
						 placeholder="选择日期时间">
						</el-date-picker>
					</el-form-item>
					<el-form-item style="margin: 10px 28px!important;" label="结束时间">
						<el-date-picker style="width: 200px;" v-model="stop_time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
						 placeholder="选择日期时间">
						</el-date-picker>
					</el-form-item>
					<el-form-item style="margin: 10px 28px!important;" label="播放速度"> &nbsp;&nbsp;
						<el-radio v-model="play_speed" label="0">快</el-radio>
						<el-radio v-model="play_speed" label="1">慢</el-radio>
					</el-form-item>

					<el-form-item style="margin: 10px 0px!important;">
						<el-button type="primary" @click='search' icon="el-icon-search">搜索</el-button>
					</el-form-item>
				</div>
			</el-form>
		</div>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>车辆基本数据</span>
				<el-button @click='close' style="float: right; padding: 3px 0" type="text"><i class="el-icon-close"></i>关闭</el-button>
			</div>
			<el-row>
				<el-col :span="8">车牌号：{{info.licensePlateNumber}}</el-col>
				<el-col :span="8">车架号：{{info.vin}}</el-col>
				<el-col :span="8">车辆型号：<template v-if="item.value == info.vehicleType" v-for='item in dict.vehicleType'>{{item.type}}
					</template></el-col>
			</el-row>
			<el-row class="car-card-line">
				<el-col :span="8">车主姓名：{{info.ownerName}}</el-col>
				<el-col :span="8">联系电话：{{info.ownerPhoneNum}}</el-col>
				<el-col :span="8">所属企业：{{info.enterpriseName}}</el-col>
			</el-row>
			<el-row class="car-card-line">
				<el-col :span="8">联系人姓名：{{info.chineseName}}</el-col>
				<el-col :span="8">联系人电话：{{info.contactsPhoneNum}}</el-col>
				<el-col :span="8">使用性质：<template v-if="item.value == info.property" v-for='item in dict.property'>{{item.type}}
					</template></el-col>
			</el-row>
		</el-card>

		<div style="height: 500px;margin: 20px 20px 20px 20px;border: 1px solid #B8BECC;" id="container"></div>
		<div class="content-table">
			<el-table :data="tableData" show-header stripe style="width: 100%;">
				<el-table-column prop="licensePlateNumber" label="车牌号" width="100">
				</el-table-column>
				<el-table-column prop="driverName" label="司机姓名" width="150">
				</el-table-column>
				<el-table-column prop="speed" label="时速" width="100">
				</el-table-column>
				<el-table-column prop="mileage" label="累计里程" width="100">
				</el-table-column>
				<el-table-column prop="longitude" label="当前经度" width="200">
				</el-table-column>
				<el-table-column prop="latitude" label="当前纬度" width="200">
				</el-table-column>
				<el-table-column prop="soc" label="剩余电量" width="100">
				</el-table-column>
				<el-table-column prop="alertStatus" label="报警信息">
					<template slot-scope="scope">
						<div v-if="scope.row.alertStatus != null " >
						{{scope.row.alertStatus.highestAlertLevel}} 
							<span style="color: red;" v-if="scope.row.alertStatus.alert.temperatureDifferenceAlert">温度差异报警 </span> 
							<span style="color: red;" v-if="scope.row.alertStatus.alert.cellHighTemperatureAlert">电池高温报警 </span> 
							<span style="color: red;" v-if="scope.row.alertStatus.alert.driveMotorControllerTemperatureAlert">驱动电机控制器温度报警 </span> 
							<span style="color: red;" v-if="scope.row.alertStatus.alert.highVoltageInterlockStatusAlert"> 高压互锁状态报警 </span>
							<span style="color: red;" v-if="scope.row.alertStatus.alert.driveMotorTemperatureAlert">驱动电机温度报警 </span>
							<span style="color: red;" v-if="scope.row.alertStatus.alert.energyStorageOvercharge">车载储能装置类型过充 </span>
							<span style="color: red;" v-if="scope.row.alertStatus.alert.energyStorageOverVoltageAlert">车载储能装置类型过压报警 </span>
							<span style="color: red;" v-if="scope.row.alertStatus.alert.energyStorageUnderVoltageAlert">车载储能装置类型欠压报警 </span>
							<span style="color: red;" v-if="scope.row.alertStatus.alert.soclowAlert">SOC低报警 </span>
							<span style="color: red;" v-if="scope.row.alertStatus.alert.cellOverVoltageAlert">单体电池过压报警 </span>
							<span style="color: red;" v-if="scope.row.alertStatus.alert.cellUnderVoltageAlert">单体电池欠压报警 </span>
							<span style="color: red;" v-if="scope.row.alertStatus.alert.sochighAlert">SOC过高报警 </span>
							<span style="color: red;" v-if="scope.row.alertStatus.alert.socjumpAlert">SOC跳变报警 </span>
							<span style="color: red;" v-if="scope.row.alertStatus.alert.energyStorageSystemNotMatchAlert">可充电储能系统不匹配报警 </span>
							<span style="color: red;" v-if="scope.row.alertStatus.alert.cellConsistencyDifferenceAlert">电池单体一致性差报警 </span>
							<span style="color: red;" v-if="scope.row.alertStatus.alert.insulationAlert">绝缘报警 </span>
							<span style="color: red;" v-if="scope.row.alertStatus.alert.dctemperatureAlert">DC-DC温度报警 </span>
							<span style="color: red;" v-if="scope.row.alertStatus.alert.brakingSystemAlert">制动系统报警 </span>
							<span style="color: red;" v-if="scope.row.alertStatus.alert.dcstatusAlert">DC-DC状态报警 </span>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="acquisitionTime" label="时间" width="200">
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	let _this;
	export default {
		props: ['id'],
		data() {
			return {
				start_time: '',
				stop_time: '',
				play_speed: "0",
				info: {},
				dict: '',
				gdmap: '',
				tableData: [],
				gps_list: [],
				carWindow:'',
				info_list:[],
			}
		},
		created() {
			_this = this;
		},
		mounted() {
			this.init();
			this.get_dict();
			this.get_info();
		},
		methods: {
			search() {
				if(this.start_time != ''){
					if(this.stop_time != ''){
						if(this.switchMsec(this.stop_time) - this.switchMsec(this.start_time) > 3600000){
							this.$message({
								type: 'info',
								message: '结束时间不能超过开始时间1小时'
							});
							return;
						}
					}else{
						this.$message({
							type: 'info',
							message: '请选择结束时间'
						});
						return;
					}
				}else{
					if(this.stop_time != ''){
						this.$message({
							type: 'info',
							message: '请选择开始时间'
						});
						return;
					}
				}
				this.gps_list = [];
				this.gdmap.clearMap();
				this.get_gps();
			},
			 switchMsec (time){
				 let date = new Date(time);
				 return date.getTime();
			 },
			init() {
				var map = new AMap.Map('container', {
					zoom: 11, //级别
					center: [120.69889, 27.993148], //中心点坐标
				});
				this.gdmap = map;
			},
			get_dict() {
				this.$axios.get(this.$global.serverIp + 'admin/dict/findDict?keyword=vehicle')
					.then(function(res) {
						if (res != '')
							_this.dict = res.data;
					})
			},
			get_info() {
				this.$axios.get(this.$global.serverIp + 'vehicle/vehicle/detail/' + this.id)
					.then(function(res) {
						if (res != '') {
							_this.info = res.data;
							_this.get_gps();
							//window.getGpsInterval = setInterval(_this.get_gps, 5000);
						}
					})

			},
			get_gps() {
				this.$axios.post(this.$global.serverIp + 'vehicleExec/vehicleStatistics/findHistoricalRoute', {
						"vehicleId": this.id,
						"startDate": this.start_time,
						"endDate": this.stop_time,
						"page": "1",
						"limit": "100000"
					})
					.then(function(res) {
						console.log(res);
						if (res != '') {
							if (res.data != undefined) {
								var l = res.data.list.length;
								_this.tableData = res.data.list;
								for (var i = 0; i < l; i++) {
									if(res.data.list[i].longitude != 0){
										var a = [res.data.list[i].longitude, res.data.list[i].latitude];
										_this.gps_list.push(a);
										_this.info_list.push(res.data.list[i]);
									}
									
								}
								if (l >= 1)
									_this.show_gps_point();
							}

						}

					})
			},
			show_gps_point() {
				// _this.gps_list = [[116.478935,39.997761],[116.478939,39.997825],[116.478912,39.998549],[116.478912,39.998549],[116.478998,39.998555],[116.478998,39.998555],[116.479282,39.99856],[116.479658,39.998528],[116.480151,39.998453],[116.480784,39.998302],[116.480784,39.998302],[116.481149,39.998184],[116.481573,39.997997],[116.481863,39.997846],[116.482072,39.997718],[116.482362,39.997718],[116.483633,39.998935],[116.48367,39.998968],[116.484648,39.999861]];
				_this.gps_marker = new AMap.Marker({
					map: _this.gdmap,
					position: [_this.gps_list[0][0], _this.gps_list[0][1]],
					icon: "https://webapi.amap.com/images/car.png",
					offset: new AMap.Pixel(-26, -13),
					autoRotation: true,
					angle: -90,
				});
				// 绘制轨迹
				var polyline = new AMap.Polyline({
					map: _this.gdmap,
					path: _this.gps_list,
					showDir: true,
					strokeColor: "#28F", //线颜色
					// strokeOpacity: 1,     //线透明度
					strokeWeight: 6, //线宽
					// strokeStyle: "solid"  //线样式
				});

				var passedPolyline = new AMap.Polyline({
					map: _this.gdmap,
					// path: lineArr,
					strokeColor: "#AF5", //线颜色
					// strokeOpacity: 1,     //线透明度
					strokeWeight: 6, //线宽
					// strokeStyle: "solid"  //线样式
				});
				
				 _this.carWindow = new AMap.InfoWindow({
					offset: new AMap.Pixel(0, -30),
					size: new AMap.Size(120, 70),
				});


				_this.gps_marker.on('moving', function(e) {
					passedPolyline.setPath(e.passedPath);
					var lastLocation = e.passedPath[e.passedPath.length - 1];
					_this.carWindow.setPosition(lastLocation);
					_this.setVehicleSpeedInWidowns(e.passedPath.length - 1);
				});
				// 7.打开速度框
				_this.carWindow.open(_this.gdmap, _this.gps_marker.getPosition());
					var speed;
				if(this.play_speed == '0'){
					speed = 1000;
				}else{
					speed = 200;
				}
				console.log(speed);
				_this.gps_marker.moveAlong(_this.gps_list, speed);
				_this.gdmap.setFitView();
			},
			setVehicleSpeedInWidowns(i){
				var s = "<br>速度：" + _this.info_list[i].speed + " km/h<br>能耗率：" + _this.info_list[i].fuelConsumptionRate + " (kg标油/t)<br>剩余电量：" + _this.info_list[i].soc +
					' %';
				_this.carWindow.setContent(s);
				// for (var i = 0; i < _this.gps_list.length; i++) {
				// 	if (lnglat.lat == _this.gps_list[i].lat && lnglat.lng == _this.gps_list[i].lng) {
				// 		_this.carWindow.setContent("速度:公里/时");
				// 		return;
				// 	}
				// }
			},
			markerClick(e) {
				this.infoWindow.setContent(e.target.content);
				this.infoWindow.open(this.gdmap, e.target.getPosition());
			},
			close() {
				clearInterval(window.getGpsInterval);
				this.$emit("close", 0);
			}
		}
	}
</script>

<style>
	.box-shadow {
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
	}

	.box-card {
		margin: 20px;
	}

	.car-card-line {
		margin-top: 20px;
	}
	.amap-info-content{
		font-size: 12px!important;
		padding: 0 0 0 5px!important;
	}
</style>
